<template>
	<view class="wrapForm pzForm">
		<view class="bgLine"></view>
		<view class="wrapFormBody pL15 pR15 pT15">
			<u-form :label-width="300" class="xf-wrap-form" ref="dataForm" :rules="rules" :model="formData">

				<u-form-item :required="true" :label-style="{'font-size':'36rpx'}" :border-bottom="false" :label-position="'top'"
					label="填写备注" prop="processNotes">
					<u-input :custom-style="{background:'#F8F8F8',borderRadius:'20rpx'}"
						:placeholderStyle="'margin-left:24rpx;color:#8d8d8d'" class="textPz" type="textarea"
						placeholder="请详细描述您需要补充的内容" v-model="formData.processNotes" />
				</u-form-item>
				<u-form-item :required="true" :label-style="{'font-size':'36rpx'}" :border-bottom="false" :label-position="'top'"
					label="上传凭证" prop="processPicture">
					<xfUploadImg  v-model="formData.processPicture" :limit="9" />
					<view class="flex alg-center">
						<image class="imgW32" :src="resources.posIcon" mode=""></image>
						<text class="font14">{{formData.processAddress}}</text>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="flex jst-center bottomW">
			<view class="pointer rightNowPay u-f font15 t-center" @click="submitPz">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {upLoadpz,finishUpLoadpz} from  "@/api/userInterface/user.js"
	import {
		getLocalAddress
	} from "@/libs/map.js"
	export default {
		data() {
			return {
				formData: {
					orderId: "",
					processNotes: "",
					processPicture: '',
				    oddjobInfoId:'',
					processAddress:'',
					
				},
				regisid:"",
				type:1,

				rules:{
					processNotes: [{
						required: true,
						message: '请输入备注',
						trigger: ['change', 'blur'],
					}],
					processPicture: [{
						required: true,
						message: '请上传凭证',
					}],
				}
			}
		},
		async onLoad(e) {
			this.formData.orderId=e.orderId;
			this.formData.oddjobInfoId=e.id;
			this.regisid=e.regisId;
			this.type=e.type;
			getLocalAddress().then(res=>{
				this.formData.processAddress=res.result.formatted_addresses.recommend
			})
			console.log(this.formData)
		},
		onReady() {
			this.$refs.dataForm.setRules(this.rules);
		},
		methods: {
		
			submitPz() {
				this.$refs.dataForm.validate(valid => {
					if (valid) {
						let data=this.xf.deepClone(this.formData)
						if(data.processPicture&&data.processPicture.length>0){
							data.processPicture=data.processPicture.map(obj => obj.url).join(',')
						}
					
						if(this.type==1){
							upLoadpz(data).then(res=>{
								this.xf.onlineUtils.toast(res.message);
								this.formData.processNotes="";
								this.formData.processPicture="";
								setTimeout(()=>{
									uni.navigateBack()
								},2000)
								
							}).catch(err=>{
								
							})
						}else{
							data.regisid=this.regisid;
							console.log(data)
							finishUpLoadpz(data).then(res=>{
								this.xf.onlineUtils.toast(res.message);
								this.formData.processNotes="";
								this.formData.processPicture="";
								setTimeout(()=>{
									uni.navigateBack()
								},2000)
								
							}).catch(err=>{
								
							})
						}
					} else {
						console.log('验证失败');
					}
				});
				
				
			}
		}
	}
</script>
<style lang="scss">
	page {

		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background-color: #fff;
	}

	.textPz {
		background-color: #F8F8F8;
		border-radius: 20rpx;

		.uni-textarea-textarea {
			padding: 0 30rpx !important;
		}

		.u-input__textarea {
			padding: 30rpx !important;
			min-height: 200rpx !important;

		}

		// >>> .uni-textarea-compute{
		// 	margin-left: 20rpx;
		// }
	}

	.wrapForm {
		background: #fff;

		.u-list-item {
			background-color: #F8F8F8 !important;
		}
	}
</style>
<style lang="scss" scoped>
	.wrapForm {

		height: 100%;

		.wrapFormBody {
			margin-top: -30rpx;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}


	}

	.bgLine {
		background-color: #E1EEFF;
		width: 100%;
		height: 60rpx;
	}

	.bottomW {
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		left: 0;
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #3291F8;
		border-radius: 30rpx;

	}
</style>